<template>
    <div>
        使用ref 获取 元素或子组件实例

        <p>
            <input type="text" ref="el">
        </p>
    </div>
</template>

<script lang='ts' setup>
// 知识点回顾,
// ref 属性如果设置在普通元素上则通过 this.$refs.el 获取的当前的dom节点元素
// ref 属性如果设置在子组件上,则通过 this.#refs.el 获取的是当前的子组件 的实例对象

//



import { ref, onMounted } from 'vue';
const el = ref<HTMLInputElement | null>(null);
// el 获取不到元素节点,因为setup 的生命周期执行时间在 创建之前brforeCreate之前执行
// console.log('el', el)
// const useobj = ref({
//     name: '小白', like: {
//         game: {
//             gamename: {
//                 lol: '英雄联盟'
//             }
//         }
//     }
// })
// // 可选链 (当一个对象的属性上不确定是否存在某一个属性,此时可以使用可选链)
// console.log(useobj.value?.like?.game?.gamename?.lol);

onMounted(() => {
    // 可以获取到生命周期函数的
    console.log(el);

    console.log('el', el.value?.value)
})



</script>
<style scoped>

</style>